<template>

  <!--系统管理--机构类型权限管理-->
  <div class="content-area institutional-type-authority-manage">
    <!-- 位置模块 -->
    <HeadTop></HeadTop>
    <div class="manage-content">

      <div class="content-info">
        <!-- 表格数据与翻页合并模块 -->
        <DataTable :childLoad="parentLoad" :dataTableObj="dataTableObj" v-on:getPageNo="searchByPageNo" v-on:handlePageReload="pageReload"
                   v-on:getPageSize="searchByPageSize" v-on:selectChange="checkChange">
          <!--除查询外的操作-->
          <div slot="operate">
            <div class="some-operate">
              <button class="some-btn some-btn-delete" @click="delFeedback()">批量删除</button>
            </div>
          </div>
          <el-table-column fixed="left" type="selection" width="55"></el-table-column>
          <!-- 额外的操作以及其他因素 -->
          <el-table-column fixed="right" align="center" label="操作" width="180">
            <template slot-scope="scope">
              <div class="item-route">

                <div class="item-route-link" @click="delFeedback(scope.row.id)">删除</div>
              </div>
            </template>
          </el-table-column>
        </DataTable>
      </div>

    </div>
  </div>
</template>
<script>
  // 表格数据
  import DataTable from "../../../components/dataTable/dataTable"
  import com from "../../../js/common"

  import HeadTop from "../../../components/head-top/head-top"
  import {delFeedback, getFeedbackList} from '@/api/getData'

  export default {
    name: 'feedback',
    components: {
      DataTable,
      HeadTop
    },
    data() {
      return {
        parentLoad: "加载中...",
        // 表格数据
        dataTableObj: {
          tableData: [],
          tableColumns: [
            {
              text: '序号',
              width: '60',
              attributeName: 'index'
            },
            {
              text: '用户名',
              width: '150',
              attributeName: 'userName'
            },
            {
              text: '意见类型',
              width: '150',
              attributeName: 'type'
            },
            {
              text: '手机型号',
              width: '150',
              attributeName: 'model'
            },
            {
              text: '版本号',
              width: '150',
              attributeName: 'version'
            },
            {
              text: '上报时间',
              width: '150',
              attributeName: 'createDate'
            },
            {
              text: '意见详情',
              width: '250',
              attributeName: 'content'
            },
          ],

          // 翻页所需数据
          pageObj: {
            // 每页分为几条数据
            pageSize: 10,
            // 总共多少数据
            pageNum: 0,
            // 当前页
            pageNo: 1,
            searchStatus: 2,
          },
          checkIds: []
        },
      }
    },
    mounted() {
      // 获取当前页面所需数据
      this.getPageData()
    },
    methods: {
      // 获取意见反馈数据
      getPageData() {
        this.dataTableObj.pageObj.searchStatus = 2
        this.dataTableObj.tableData = []
        getFeedbackList({
          pageNo: this.dataTableObj.pageObj.pageNo,
          pageSize: this.dataTableObj.pageObj.pageSize,
          condition: {}
        }).then((data) => {
          this.dataTableObj.pageObj.searchStatus = 1
          let info = data.data.data
          let infoList = info.data
          let infoArr = []
          if (infoList.length > 0) {
            infoList.forEach((i, t) => {
              i.index = (t + 1) + this.dataTableObj.pageObj.pageSize * (this.dataTableObj.pageObj.pageNo - 1)
              infoArr.push(i)
            })
          } else {
            this.parentLoad = '暂无数据'    // loading(暂无数据)
          }
          this.dataTableObj.tableData = infoArr
          this.dataTableObj.pageObj.pageNum = info.totalRecord
        }).catch(err => {
          this.parentLoad = err.data.message
          this.$message.error(err.data.message)
        })
      },
      // 表格选框勾选
      checkChange(val) {
        console.log(val)
        let checkIds = [];
        val.forEach(function (i) {
          checkIds.push(i.id);
        })
        this.dataTableObj.checkIds = checkIds;
      },

      // 删除意见反馈
      delFeedback(res) {
        if (res) {
          this.dataTableObj.checkIds = [res]
        } else {
          if (this.dataTableObj.checkIds.length === 0) {
            this.$message.warning('请选择删除项')
            return
          }
        }
        this.$confirm('确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          com.axio.post(`${com.basePath}/tend/feedback/delete`, {idList: this.dataTableObj.checkIds}).then((res) => {
            this.getPageData()
          }).catch((err) => {
            this.$message.error('操作失败');
          })
        }).catch(_ => {
        });
      },
      // 查看详情
      showDetail(res) {

      },
      // 切换第几页
      searchByPageNo(val) {
        // 切换每页数目
        this.dataTableObj.pageObj.pageNo = val;
        this.getPageData();
      },

      // 每页多少内容
      searchByPageSize(val) {
        this.dataTableObj.pageObj.pageSize = val;
        this.getPageData();
      },

      // 页面刷新
      pageReload(){
        this.getPageData();
      }
    }
  }
</script>
<style lang="scss" type="text/scss">
  @import "../../../style/entry/components/pageCommon";

</style>
